<script setup lang="ts">
import { reactive, ref } from "vue";
import { rolecont, addRolecont, editRolecont, deteRolecont } from '../apis/roleconter'
import { menuAllApi } from '../apis/menuApi'
import { adminListApi } from '../apis/loginApi'
import { ElMessage } from 'element-plus';
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';
import { menuStore } from '../stores/Menu';
// //接口
interface RoleController {
    id: number
    name: string
    description: string
    createTime: string
    mname: string

}

let RoleController = reactive<RoleController[]>([])
let RoleControllers = reactive([])
// //声明变量
const store = menuStore();
const RoleInfo = reactive({
    name: ''
})
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible2 = ref(false)
const total = ref(false)
const count = ref(5);
let AdminData = reactive([]);
const handleSizeChange = (val: number) => {
    pageSize4.value = val;
    console.log(`每页${val} 条`)
}
const handleCurrentChange = (val: number) => {
    // currentPage4.value = val
    console.log(`当前页: ${val}`)
}

// 渲染

const render = async () => {
    const { data } = await rolecont(currentPage4.value, pageSize4.value, RoleInfo.name)
    // console.log(data.code);
    if (data.code == 0) {
        // RoleController.values = data.data
        RoleController.length = 0
        RoleController.push(...data.data)
        total.value = data.count
        RoleControllers.length = 0
        RoleControllers.push(...store.$state.username)
        RoleController.forEach((v, i) => {
            v.name = RoleControllers[i]
        })
    }
}
render()
const render2 = async () => {
    const { data }: { [propsName: string]: any } = await menuAllApi()
    if (data.code == 0) {
        AdminData.length = 0
        data.data.forEach((v) => {
            AdminData.push({ id: v.id, name: v.name })
        })
    }
}
render2()
//编辑确定
const editData = ref(false)
const editable = reactive({
    id: null,
    name: '',
    description: '',
    mname: '',
    createTime: '',
    menuIds: [],
})
const editadmin = async (row) => {
    editData.value = true
    editable.id = row.id
    editable.name = row.name
    editable.description = row.description
    editable.mname = row.mname
    editable.createTime = row.createTime
    const { data }: { [propsName: string]: any } = await menuAllApi()
    if (data.code == 0) {
        AdminData.length = 0
        data.data.forEach((v) => {
            AdminData.push({ id: v.id, name: v.name })
        })
    }
}
const onAdd = async () => {
    editData.value = false
    let arrmname = editable.mname.split(","||"，");
    AdminData.forEach((v) => {
        arrmname.forEach((i) => {
            if (i == v.name) {
                editable.menuIds.push(v.id)
            }
        })
    })
    const { data } = await editRolecont({
        id: editable.id,
        name: editable.name,
        description: editable.description,
        menuIds: editable.menuIds
    })
    if (data.code == 0) {
        ElMessage.success('修改成功');
        editData.value = false
        editable.menuIds.length = 0;
        render();
    } else {
        ElMessage.error('修改失败');
    }
}


//添加确定
const adData = ref(false);
const addable = reactive({
    name: '',
    description: '',
    menuIds: [],
    mname: ''
})
// const addjiaose = () => { adData.value = true }
const add = async () => {
    let arrmname = addable.mname.split(","||"，");
    AdminData.forEach((v) => {
        arrmname.forEach((i) => {
            if (i == v.name) {
                addable.menuIds.push(v.id)
            }
        })
    })
    const { data } = await addRolecont(addable)
    if (data.code == 0) {
        ElMessage.success('添加成功');
        adData.value = false
        render();
    } else {
        ElMessage.error(data.msg);
    }
}


const deladmin = async (row) => {
    console.log(1111);

    const { data } = await deteRolecont(row.id)
    if (data.code == 0) {
        RoleController = RoleController.filter(item => item.id != row.id)
        total.value = data.data.total
        ElMessage.success('删除成功');
        render();
    } else {
        ElMessage.error('添加失败');
    }
}
// 
const adminSeach = async () => {
    render()
    console.log(111);

    RoleInfo.name = ''

}
const chongzhi = async () => {
    render()
}
//渲染
</script>
<template>
    <zlj-header msg="管理员管理"></zlj-header>
    <el-container style="background-color: #f5f7fa;padding:0 ;">
        <el-main style="margin:1rem 1rem 0 1rem;background-color: rgb(255, 255, 255);">
            <div class="pick">
                <h4>数据筛选</h4>
                <div class="pick-form">
                    <div>
                        <el-form :inline="true" :model="RoleInfo" class="demo-form-inline">
                            <el-form-item label="输入查询：">
                                <el-input v-model="RoleInfo.name" placeholder="角色名" clearable style="width: 14rem;" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="adminSeach">搜索</el-button>
                                <el-button type="primary" @click="adData = true">添加角色</el-button>
                                <el-button type="primary" @click="chongzhi">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                    </div>
                </div>
            </div>

            <!-- 表格 -->
            <div class="zlj-table">
                <el-table ref="multipleTableRef" :data="RoleController" border stripe style="width: 100%"
                    @selection-change="">
                    <el-table-column type="selection" style="background-color: #eee;" />
                    <el-table-column property="id" label="序号" width="100" />
                    <el-table-column property="name" label="账号名">
                    </el-table-column>
                    <el-table-column property="description" label="类型" />
                    <el-table-column property="mname" label="类型配置" />
                    <el-table-column property="createTime" label="创建时间" />

                    <el-table-column label="操作" width="100">
                        <template #default="scope">
                            <el-button link type="success" size="small" style="padding: 0;color: #1ABC9C;"
                                @click="editadmin(scope.row)">编辑</el-button>

                            <el-popconfirm title="确定要删除吗?" @confirm="deladmin(scope.row)">
                                <template #reference>
                                    <el-button style="color: #1ABC9C;" link type="success" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="demo-pagination-block">
                <el-config-provider>
                    <el-pagination v-model:current-page="currentPage4" :page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
                        :default-page-size="5" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="RoleController.length"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-config-provider>
            </div>


            <!-- 添加 -->
            <div class="dialog">
                <el-dialog v-model="adData" title="新增管理员">
                    <el-form :model="addable" style="height: 30rem;overflow-y: auto;">
                        <el-form-item label="账户名:" class="text1" :label-width="100">
                            <el-input v-model="addable.name" placeholder="请输入账户名" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="类型:" class="text1" :label-width="100">
                            <el-input v-model="addable.description" placeholder="请输入管理员" class="input">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="类型配置" class="text1" :label-width="100">
                            <el-input v-model="addable.mname" placeholder="请输入管理员类型" autocomplete="off" class="input" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="adData = false">取消</el-button>
                            <el-button type="primary" @click="add"> 确认 </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 编辑 -->
            <div class="dialog">
                <el-dialog v-model="editData" title="编辑管理员">
                    <el-form :model="editable" style="height: 30rem;overflow-y: auto;">
                        <el-form-item label="账户名:" class="text1" :label-width="100">
                            <el-input v-model="editable.name" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="类型:" class="text1" :label-width="100">
                            <el-input v-model="editable.description" class="input">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="类型配置" class="text1" :label-width="100">
                            <el-input v-model="editable.mname" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="创建时间" class="text1" :label-width="100">
                            <el-input v-model="editable.createTime" autocomplete="off" class="input" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="editData = false">取消</el-button>
                            <el-button type="primary" @click="onAdd"> 确认 </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>


        </el-main>
    </el-container>
</template>
<style scoped lang="less">
.zlj-btn2 {
    margin: 1rem;
}

.zlj-table {
    margin: 2rem 2rem 0 2rem;
}

.el-container {
    height: calc(100% - 4rem);
}

.el-main {
    padding: 0;
    position: relative;

    .state {
        width: 8rem;
    }

    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }

    .demo-date-picker .block {
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .demo-date-picker .block:last-child {
        border-right: none;
    }

    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.pick {
    border: 1px solid #ccc;
    margin: 0 1rem 0 1rem;

    .el-form--inline .el-form-item {
        margin-right: 10px;
        margin-left: 10px;
    }

    .el-form-item__label {
        padding: 0;
    }

    h4 {
        padding-left: 10px;
        font-size: 18px;
        margin: 8px 0;
    }
}

.is-selected {
    color: #1989fa;
}
</style>
<style lang="less">
.el-table .cell {
    padding: 0;
}

.cell {
    text-align: center;

    .el-checkbox {
        margin-left: 1.2rem;
    }
}

.demo-pagination-block {
    //分页样式
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 1rem;

    .el-pager li:hover {
        color: rgb(26, 188, 156);
    }

    li.is-active {
        color: rgb(26, 188, 156)
    }
}

.el-date-editor .el-range-input {
    padding: 0;
}

.el-input_wrapper {
    width: 5rem;
}

.el-dialog__header {
    background-color: rgba(242, 242, 242, 1);
    margin: 0;
    line-height: 30px;
}

.editadmin {
    .el-input__wrapper {
        margin-bottom: 10px;
    }
}
</style>